<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css/heads.css">
  <link rel="stylesheet" href="/css/login.css">
</head>

<body>
  <div class="nav">
    <ul>
      <li class="pc">
        <a href="index.html">首页</a>
      </li>
      <li class="pc">
        <a href=""> 品牌历史</a>
        <div class="fen">
          <ul class="fen_en">
            <li><a href="index_story.html">一个美丽的故事</a> </li>
            <li>传承人的故事</li>
          </ul>
        </div>
      </li>
      <li class="pc">
        <a href="poins.html">产品中心</a>
        <div class="fen">
          <ul class="fen_en fen1">
            <li><a href=""><a href="poin_sj.html">三角钢琴</a></li>
            <li><a href="poin_ls.html">立式钢琴</a></li>
          </ul>
        </div>
      </li>
      <li class="pc">
        <a href="index_zt.html">展厅</a>
      </li>
      <a class="logo" href="#"></a>
      <li class="pc"><a href="new.html?page=1">新闻首页</a></li>
      <li class="pc">服务
        <div class="fen">
          <ul class="fen_en fen2">
            <li><a href="maintain.html">保养与维护</a></li>
            <li><a href="#">经销商查询</a></li>
          </ul>
        </div>
      </li>
      <li class="pc"><a href="">联系</a></li>
      <li class="pc"><a href="lodin.html">个人中心</a></li>
    </ul>
    <span class="ico">
      <em></em>
      <em></em>
      <em></em>
    </span>
  </div>
  
  <div class="navBou">
    <div>首页</div>
    <div>
      品牌历史
      <p><a href="">个美丽的故事</a></p>
      <p><a href="">传承人的故事</a></p>
    </div>
    <div>
      产品中心
      <p><a href="">三角钢琴</a></p>
      <p><a href="">立式钢琴</a></p>
    </div>
    <div><a href="index_zt.html">展厅</a></div>
    <div><a href="new.html">新闻首页</a></div>
    <div>服务
      <p><a href="">保养与维护</a></p>
      <p><a href="">经销商查询</a></p>
    </div>
  </div>

  <div class="login">
    <div class="login_en">
      <h2>用户登录</h2>
      <p>手机号</p>
      <input type="text" id="phone">
      <p id="ts"></p>
      <p>密码</p>
      <input type="password" id="upwd">
      <button id="btnLogin">登录</button>
      <a class="log" href="/register.html">注册</a>
      <div>
        <div>
          <p>
            <input type="checkbox" name="" id="zhu">
            <label for="zhu">下次自动登录</label>
          </p>
        </div>
        <a href="modify.html">忘记密码？</a>
      </div>
      <h6><a href="">快速注册</a></h6>
      <a class="weixin" href=""></a>
    </div>
    <div class="fo">
      <p><a href="">账户升级请联系客服人员</a></p>
      <p>Pleyel © 2019 普雷叶乐器（上海）有限公司 沪ICP备18021165号-1</p>
    </div>

  </div>
  <script>
    let phone = document.getElementById('phone');
    let upwd = document.getElementById('upwd');
    let btnLogin = document.getElementById('btnLogin');
    let ts = document.getElementById('ts');
    //点击事件 登录
    btnLogin.onclick = function () {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            let result = JSON.parse(xhr.responseText);
            /* console.log(result); */
            //判断账号密码格式并登录
            if (phone.value == '') {
              ts.innerHTML = `<span>账号不能为空</span>`;
            } else if (upwd.value == '') {
              ts.innerHTML = `<span>密码不能为空</span>`;
            } else if (result.code == 0) {
              console.log(phone.value)
              ts.innerHTML = `<span>账号或者密码错误</span>`;
            } else {
              window.location.href = 'index.html'
            }
          }
        }
      }
      xhr.open("POST", "/v1/users/login", true)
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
      xhr.send(`phone=${phone.value}&upwd=${upwd.value}`)
    }
  </script>
</body>

</html>